<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>“智慧通”教学信息化管理系统————雷达装备原理与运用</title>
    <script src="lib/echarts/echarts.js"></script>
    <script src="lib/echarts/echarts-wordcloud.min.js"></script>
    <script src="js/banjiqingkuang.js"></script>
    <script src="js/knowledge-graph.js"></script>
    <script src="js/echart-clock.js"></script>
    <script src="js/scoretable.js"></script>
    <script src="js/worldcloud.js"></script>
    <script src="js/rank.js"></script>
    <script src="js/radartable.js"></script>
    <script src="js/upright.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-item status-1">
                <h2 class="glow-text" style="font-size: 1.5em;">“智慧通”教学信息化管理系统</h2>
                <p class="glow-text" style="font-size: 1.1em;">雷达装备原理与运用</p>
            </div>
            <div class="status-item status-2">
                <div class="sub-status">
                    <div class="sub-item">
                        <div class="sub-value" style="color: #fff;">课程总览</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value">活动数据</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value">课程内容</div>
                    </div>
                    <div class="sub-item">
                        <div class="sub-value" onclick="handleMenuClick('evaluation')">课程教学总结</div>
                    </div>
                </div>
            </div>
            <div class="status-item status-3">
                <div class="status3-left">
                    <h2 class="glow-text" style="text-align: center;">预警技术与指挥220101期班</h2>
                </div>
                <div class="status3-right">
                    <div class="status-progress">
                        <div id="realTimeDate" class="date-container"></div>
                        <div id="realTimeClock" class="glow-text"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <div class="top-section">
                    <div class="left-top">
                        <div class="sub-section">
                            <h2>班级情况</h2>
                            <div class="gender-section">
                                <div class="chart-container" id="genderChart" style="width:40%;">
                                    <h2 style="font-size: large;">男女生人数情况</h2>
                                </div>
                                <div class="gender-info">
                                    <div class="gender-item">
                                        <i class="fas fa-mars gender-icon male"></i>
                                        <span class="gender-count" id="maleCount">28</span>
                                    </div>
                                    <div class="gender-item">
                                        <i class="fas fa-venus gender-icon female"></i>
                                        <span class="gender-count" id="femaleCount">2</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 下半部分：考核情况 -->
                            <div class="exam-section">
                                <div class="chart-container" id="examChart" style="width:40%">
                                    <h2 style="font-size: large;">课程完成情况</h2>
                                </div>
                                <div class="exam-info">
                                    <div class="exam-item">
                                        <i class="fas fa-check-circle exam-icon complete"></i>
                                        <span class="exam-count" id="completeCount">29</span>
                                    </div>
                                    <div class="exam-item">
                                        <i class="fas fa-times-circle exam-icon incomplete"></i>
                                        <span class="exam-count" id="incompleteCount">1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sub-section">
                            <h2>课程难易情况</h2>
                            <div class="chart-container" id="practiceChart"></div>
                        </div>
                    </div>
                    <div class="right-top">
                        <h2>课程知识图谱</h2>
                        <div class="chart-container-knowledgemap" id="knowledgemap"></div>
                    </div>
                </div>
                <div class="bottom-section">
                    <h2>学生个体学习情况</h2>
                    <div class="chart-container" id="progressChart"></div>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="right-block">
                    <h2>课程总进度</h2>
                    <div class="chart-container" id="scoreChart"></div>
                </div>
                <div class="right-block">
                    <h2>课程词云图</h2>
                    <div class="chart-container" id="wordCloudChart"></div>
                </div>
                <div class="right-block">
                    <h2>学习之星</h2>
                    <div class="chart-container" id="knowledgeChart">
                        <!-- 三个排行榜入口 -->
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 雷达操纵之星</h3>
                            <div class="champion">张伟</div>
                        </div>
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 雷达运用之星</h3>
                            <div class="champion">李娜</div>
                        </div>
                        <div class="rank-card">
                            <h3><i class="fas fa-medal gold-medal"></i> 雷达维修之星</h3>
                            <div class="champion">王强</div>
                        </div>
                        
                        <!-- 弹出模态框 -->
                        <div id="rankModal" class="modal">
                            <div class="modal-content">
                                <span class="close">&times;</span>
                                <div class="rank-columns">
                                    <!-- 三列将通过JS动态生成 -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="detailModal" class="modal">
      <div class="modal-content" style="width: 95%; height: 95%;">
          <span class="close" onclick="closeDetailModal()">&times;</span>
          <div class="modal-top" style="height: 15%; display: flex; gap: 20px; padding: 15px;">
              <div class="top-item" style="flex:1; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
                  <h3 style="color: #90e0ef; text-align: center;">学生总数</h3>
                  <div style="font-size: 2em; text-align: center; color: #fff; text-shadow: 0 0 10px rgba(144, 224, 239, 0.7);">30人</div>
              </div>
              <div class="top-item" style="flex:1; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
                  <h3 style="color: #90e0ef; text-align: center;">平均分数</h3>
                  <div style="font-size: 2em; text-align: center; color: #fff; text-shadow: 0 0 10px rgba(144, 224, 239, 0.7);">86.5分</div>
              </div>
              <div class="top-item" style="flex:1; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
                  <h3 style="color: #90e0ef; text-align: center;">最高分</h3>
                  <div style="font-size: 2em; text-align: center; color: #fff; text-shadow: 0 0 10px rgba(144, 224, 239, 0.7);">97分</div>
              </div>
              <div class="top-item" style="flex:1; background: rgba(255,255,255,0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center;">
                  <h3 style="color: #90e0ef; text-align: center;">最低分</h3>
                  <div style="font-size: 2em; text-align: center; color: #fff; text-shadow: 0 0 10px rgba(144, 224, 239, 0.7);">65分</div>
              </div>
          </div>
          <div class="modal-middle" style="height: 55%; display: flex; gap: 15px; padding: 0 15px 15px 15px;">
              <div class="charts-left" style="flex: 3; display: flex; flex-direction: column; gap: 15px;">
                  <div id="chart1" style="flex:1; background: rgba(0,40,85,0.8); border-radius: 8px; padding: 10px;">
                      <h3 style="color: #90e0ef; text-align: center; margin-bottom: 5px;">雷达原理掌握情况</h3>
                  </div>
                  <div id="chart2" style="flex:1; background: rgba(0,40,85,0.8); border-radius: 8px; padding: 10px;">
                      <h3 style="color: #90e0ef; text-align: center; margin-bottom: 5px;">设备操作熟练度</h3>
                  </div>
                  <div id="chart3" style="flex:1; background: rgba(0,40,85,0.8); border-radius: 8px; padding: 10px;">
                      <h3 style="color: #90e0ef; text-align: center; margin-bottom: 5px;">故障排查能力</h3>
                  </div>
              </div>
              <div class="radar-right" style="flex: 2; background: rgba(0,40,85,0.8); border-radius: 8px; padding: 10px;" id="modalRadar">
                  <h3 style="color: #90e0ef; text-align: center; margin-bottom: 5px;">综合能力评估</h3>
              </div>
          </div>
          <div class="modal-bottom" style="height: 30%; padding: 0 15px 15px 15px;" id="modalBottom">
              <h3 style="color: #90e0ef; text-align: center; margin-bottom: 5px;">学生详细成绩分布</h3>
          </div>
      </div>
  </div>


    <script>
        // 在空script标签中添加
        function handleMenuClick(type) {
            if (type === 'evaluation') {
                window.open('kaoshizongjie.html', '_blank'); // 新窗口打开
                // 或 location.href = 'evaluation.html' // 当前窗口跳转
            }
            // 其他菜单的点击处理可以在此扩展
        }
    </script>
</body>
</html>